<template>
  <el-form size="mini" label-position="top">
    <el-form-item label="执行失败：">
      <div class="alerts-wrapper">
        <template v-if="alerts && alerts.length">
          <div v-for="alert in alerts" :key="alert.category" class="alert-item">
            <span class="alert-name">{{ `通知到${alert.category_name}` }}</span>
            <task-alert-input
              v-model="alert.alert_id"
              :category="alert.category"
            ></task-alert-input>
          </div>
        </template>
      </div>
    </el-form-item>
  </el-form>
</template>
<script>
const TaskAlertInput = {
  name: "DataTaskAlertInput",
  // inject: ["project_id"], // 注入项目 id
  props: {
    value: String,
    type: {
      type: String,
      default: "Select"
    },
    category: [String, Number],
    project_id: String
  },
  data() {
    return {
      options: []
    };
  },
  watch: {
    category: {
      handler(val) {
        this.initOptions(val);
      },
      immediate: true
    }
  },
  render(h) {
    let { type } = this;

    let method = `render${type}`;
    let children = this[method](h);
    return h(
      "div",
      {
        class: "alert-input-wrapper"
      },
      [children]
    );
  },
  methods: {
    initOptions(category) {
      const { project_id = '' } = this.$route.query
      this.$http.task
        .getAlertTypes({ project_id, category: `${category}` })
        .then(res => {
          this.options = res;
        });
    },
    renderSelect(h) {
      let { options } = this;
      let optionsEl = options.map(({ id, name }) => {
        return h("el-option", {
          props: {
            label: name,
            value: id
          }
        });
      });
      let self = this;
      return h(
        "el-select",
        {
          props: {
            value: this.value,
            clearable: true,
            filterable: true
          },
          on: {
            change: function(event) {
              self.$emit("input", event);
            }
          }
        },
        optionsEl
      );
    },
    renderInput() {},
    renderBoolean() {}
  }
};

export default {
  name: "TaskSettingWarning",
  components: {
    TaskAlertInput
  },
  props: {
    id: String
  },
  data() {
    return {
      alerts: []
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.$http.workflow.getAlerts({ id: this.id }).then(res => {
        this.alerts = res;
      });
    },
    save() {
      let { alerts, id } = this;
      this.$http.workflow
        .saveAlert({
          $query: {
            id
          },
          $body: alerts
        })
        .then(res => {
          this.$message({
            type: "success",
            message: "保存成功"
          });
        });
    }
  }
};
</script>
<style lang="scss">
.alerts-wrapper {
  .alert-item {
    display: flex;
    align-items: center;
    .alert-name {
      width: 120px;
    }
  }
}
</style>
